<template>
  <div>
    <mt-swipe :auto="4000">
      <!-- 在组件中一定要绑定 key -->
      <!-- 将来，谁使用次轮播组件，水位我们传递 lunbotuList -->
      <!-- 此时，lunbotuList 应该是父向子传值 -->
      <mt-swipe-item v-for="(item,i) in lunbotuList" :key="i">
        <img :src="item.img" :class="{'full': isfull}" />
      </mt-swipe-item>
    </mt-swipe>
  </div>
  <!-- 商品详情页的轮播图很丑：我们期望商品详情页的图片高度为100%，但是宽度应该为自适应 -->
  <!-- 所以：首页中的轮播图和详情中的轮播图就有了分歧点 -->
  <!-- 那么我们就应该指定一个属性，让调用者去指定 轮播图的宽度究竟是自适应还是100% -->
</template>

<script>
export default {
    props: ["lunbotuList","isfull"]
};
</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 200px;

  .mint-swipe-item {
    // &:nth-child(1) {
    //   // background-image: url('../../images/timg2.jpg');
    //   background-size: 200px;
    // }
    // &:nth-child(2) {
    // //   background-image: url('../../images/menu1.png');
    //   background-size: 200px;
    // }
    // &:nth-child(3) {
    //   // background-image: url('../../images/timg2.jpg');
    //   background-size: 200px;
    // }
    text-align: center;

    img {
    //   width: 100%;
      height: 100%;
    }
  }
}

.full{
    width: 100%;    
}
</style>